<template>
    <div class="topo">
        <!-- 侧边工具栏 -->
        <div class="topo_left">
            <div class="left_icon" v-for="(item, index) in icon" :key="index" @click="setActiveTool(index)">
                <img class="icon_png" :src="item.iconPath" alt="">
            </div>
        </div>

        <!-- 画布部分 -->
        <div class="canvns_right" id="canvns_right">

        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import Konva from 'konva';
import { Shape } from "konva/lib/Shape";
import geometricObject from '../../tool/objectClass'
const icon = ref([
    { iconPath: "icon/suofang.png" },
    { iconPath: "icon/ziti.png" },
    { iconPath: "icon/xiantiao.png" },
    { iconPath: "icon/huajuxing.png" },
    { iconPath: "icon/quanxing.png" },
    { iconPath: "icon/tx-lingxing.png" },
    { iconPath: "icon/diannao.png" }
])
// 追踪工具唤醒状态
const mode = ref(null)
// 追踪全屏状态
const isFullScreen = ref(false);
// 物体类 geometricObject
const isGeometricObject = ref(null)
// 确保 stage 监听器在一个功能下只能存在当前的监听事件
let currentMouseDownListener = null;
// 用于存储上一个工具的事件监听器


//全局鼠标移动事件，鼠标移动到哪个dom，打印哪个dom--->CursorPointing
onMounted(() => {
    document.addEventListener('mousemove', CursorPointing)
    //主方法
    init()
    isGeometricObject.value = new geometricObject()
})

// KonvaJS 
let layer, stage, pointerPosition, groupLine

// 主方法
function init() {
    const canvns_right = document.querySelector("#canvns_right")
    const canvnsWidth = canvns_right.offsetWidth
    const canvnsHeight = canvns_right.offsetHeight

    // 创建了一个画布
    stage = new Konva.Stage({
        container: 'canvns_right', // 画布容器id
        width: canvnsWidth, // 画布大小
        height: canvnsHeight
    })

    // 然后创建层
    layer = new Konva.Layer()
    //  document.querySelector("canvas").className = "konva"

    // 创建 线条组 
    groupLine = new Konva.Group()
}

// 工具控制器
function setActiveTool(index) {
    // 全屏控件 fullScreenFlag
    switch (index) {
        case 0: // 全屏按钮
            mode.value = "fullScreen"
            // 进入全屏
            if (!isFullScreen.value) {
                fullScreen()
                isFullScreen.value = true
            } else {
                // 退出全屏
                outfullScreen()
                isFullScreen.value = false
            }
            break;
        case 1: // 文字按钮
            mode.value = "text"
            console.log(mode.value);
            break;
        case 2:// 线条按钮
            mode.value = "line"
            eventController()
            break;
        case 3: // 矩形
            mode.value = "rectangle"
            console.log(mode.value);
            break
        case 4: // 圆形按钮
            mode.value = 'circular'
            eventController()
            break;
        case 5: // 菱形按钮
            mode.value = 'diamond'
            console.log(mode.value);
            break;
        case 6: // 电脑
            mode.value = "computer"
            eventController()
    }
}

// 事件控制器
function eventController() {
    // 根据当前模式添加新的监听器
    switch (mode.value) {
        case "circular":
            console.log("circular");
            isGeometricObject.value.circle(layer, stage);
            break;
        case "computer":
            console.log("computer");
            isGeometricObject.value.ImageObject(layer, stage);
            break;
        case "line":
            console.log("line");
            isGeometricObject.value.line(layer, groupLine, stage)
    }
}

// 添加工具事件监听器到 previousToolEventHandlers 数组中


/**
 * 光标指向 canvns_right topo_left的宽度减少 ，指向 topo_left topo_left的宽度增加
 */
function CursorPointing(event) {
    var targetElement = event.target;
    if (targetElement.className === 'konva') {
        const topo_left = document.querySelector(".topo_left")
        topo_left.style.width = "5%"
        topo_left.style.transition = "width 0.3s ease";
    } else if (targetElement.className === 'topo_left') {
        targetElement.style.width = "7%"

    }
}

//点击全屏
function fullScreen() {
    let topo = document.querySelector(".topo")
    topo.style.position = 'fixed'
    topo.style.top = "0"
    topo.style.left = "0"
    topo.style.width = "100vw"
    topo.style.height = "100vh"
    layer.draw()
}
//退出全屏
function outfullScreen() {
    console.log(123);
    let topo = document.querySelector(".topo")
    topo.style.position = ''
    topo.style.top = ""
    topo.style.left = ""
    topo.style.width = ""
    topo.style.height = ""
}


// 添加画布
</script>

<style scoped>
/* 最高层盒子 */
.topo {
    width: 100%;
    height: 100%;
    position: relative;
    transition: width height 0.3s ease;
}

/* 侧边工具栏 */
.topo_left {
    position: absolute;
    left: 0;
    width: 7%;
    height: 100%;
    background-color: pink;
    z-index: 100;
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
    transition: width 0.3s ease;
    /* display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between; */
}

.left_icon {
    position: relative;
    width: 35px;
    height: 35px;
    margin: 8px auto;
    border-radius: 50px;
}

.icon_png {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}


/* 画布部分 */
.canvns_right {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(100, 76, 105);
    cursor: crosshair;
}
</style>